<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>快递单</title>

    <style type="text/css">
        body{

            font-family: 'msyh';
            color: #000;
        }
        @font-face {
            font-family: 'msyh';
            font-style: normal;
            font-weight: normal;
            src: url(http://xu.fenxiao.cn/font/MSYH.TTF) format('truetype');
        }
        html, body {  height: 100%; }

        .container {  text-align: center;
            /*display: table-cell; */
            vertical-align: middle;  }
        .content {  text-align: center;  display: inline-block;  }
        .title {  font-size: 96px;  }
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 101.6mm;
            border:1px solid #000;
            margin: 0 auto;
        }
        .main-name{
            position: relative;
            overflow: hidden;
            width: 101.6mm;
            height: 36.524mm;
            border-bottom: 1px solid #000;
        }
        .main-name-left{
            float: left;
            margin: 4mm 2mm;
            font-size: 10px;
            line-height: 10px;
        }
        .main-name-right{
            overflow: hidden;
            font-size: 12px;
            line-height: 25px;
            margin-top: 3mm;
            margin-right: 5mm;
        }
        .main-name-address{
            position: absolute;
            left: 2mm;
            bottom: 2mm;
            clear: both;
            font-weight: 800;
            font-size: 16px;
        }
        .main-positon-code{
            height: 48.892mm;
            border-bottom: 1px solid #000;
        }
        .main-postiton{
            border-bottom: 3px solid #000;
        }
        .main-postiton p{
            font-family: "msyh";
            font-size: 26px;
            line-height: 40px;
            text-align: center;
        }
        .main-code{
            text-align: center;
        }
        .main-code img{
            display: block;
            width: 54.84mm;
            height: 21.99mm;
            margin: 2mm auto;
        }
        .main-num{
            position: relative;
            height: 5.722mm;
            border-bottom: 3px solid #000;
        }
        .main-num-title{
            position: absolute;
            font-size: 10px;
            line-height: 5.722mm;
            left: 2mm;
        }
        .main-num-wrap{
            height: 5.722mm;
            line-height: 5.722mm;
            text-align: center;
        }
        .main-sign{
            height: 10.996mm;
            line-height: 10.996mm;
            font-size: 10px;
            padding-left: 2mm;
            border-bottom: 1px solid #000;
        }
        .main-detail{
            position: relative;
            border-bottom: 1px solid #000;
        }
        .main-detail-content{
            width: 100%;
            height: 49.531mm;
        }
        .main-detail-state{
            position: absolute;
            font-size: 14px;
            padding: 1mm 3mm;
            border: 1px solid #000;
            right: 5mm;
            bottom: 11.224mm;
        }
        .main-detail-num{
            height: 11.224mm;
            line-height: 11.224mm;
            font-size: 10px;
            margin: 0 2mm;
            font-weight: 700;
        }
        .main-detail-num img{
            margin-left: 2mm;
            width: 45.57mm;
            height: 10mm;
            vertical-align: middle;
        }
        .main-message{
            overflow: hidden;
            height: 34.342mm;
            border-bottom: 1px solid #000;
        }
        .main-message-left{
            float: left;
            width: 62.21mm;
            overflow: hidden;
        }
        .main-message-right{
            float: right;
            width: 39.39mm;
            height: 34.342mm;
            box-sizing: border-box;
            border-left: 1px solid #000;
        }
        .main-message-left li{
            padding-left: 2mm;
            padding-right: 2mm;
            list-style: none;
            font-size: 10px;
            line-height: 15px;
        }
        .main-message-left li.special{
            margin-top: 1mm;
        }
        .main-copyright{
            height: 5.234mm;
            line-height: 5.234mm;
            font-size: 8px;
        }
        .main-copyright span{
            margin: 0 2mm;
        }
        .main-copyright span.special{
            margin-left: 6mm;
        }
    </style>
</head>
<body>

@if(!empty($order->pdf_info))

    @php
        $generator = new Picqer\Barcode\BarcodeGeneratorPNG();
    @endphp
<div class="main">
    <div class="main-name">
        <div class="main-name-left">送达<br/>地址</div>
        <div class="main-name-right">
            <p>收件人：{{$order->pdf_info[0][0]['receiver_name']}}</p>
            <p>收件人电话：{{$order->pdf_info[0][0]['receiver_mobile']}}</p>
            <div>收件人地址：{{$order->pdf_info[0][0]['receiver_address']}}</div>
        </div>
        <div class="main-name-address">{{$order->pdf_info[0][0]['package_wdjc']}}</div>
    </div>

    <div class="main-positon-code">
        <div class="main-postiton">
            <p>{{$order->pdf_info[0][0]['position']}}</p>
            <p>{{$order->pdf_info[0][0]['position_no']}}</p>
        </div>
        <div class="main-code">
            <img src="{{route('barcode',$order->pdf_info[0][0]['position_no'])}}">
        </div>
    </div>
    <div class="main-num">
        <div class="main-num-title">运单编号</div>
        <div class="main-num-wrap">{{$order->pdf_info[0][0]['mailno']}}</div>
    </div>
    <div class="main-sign">收件人/代签人：</div>
    <div class="main-detail">
        <div class="main-detail-content"></div>
        <div class="main-detail-state">已验视</div>
        <div class="main-detail-num">{{$order->pdf_info[0][0]['mailno']}}
        <img src="{{route('barcode',$order->pdf_info[0][0]['mailno'])}}"></div>
    </div>
    <div class="main-message">
        <div class="main-message-left">
            <ul>
                <li class="special">寄件人：{{$order->pdf_info[0][0]['sender_name']}}</li>
                <li>寄件人电话：{{$order->pdf_info[0][0]['sender_mobile']}}</li>
                <li>寄件人地址：{{$order->pdf_info[0][0]['sender_address']}}</li>
                <li class="special">收件人：{{$order->pdf_info[0][0]['receiver_name']}}</li>
                <li>收件人电话：{{$order->pdf_info[0][0]['receiver_mobile']}}</li>
                <li>收件人地址：{{$order->pdf_info[0][0]['receiver_address']}}</li>
            </ul>
        </div>
        <div class="main-message-right">
        </div>
    </div>
    <div class="main-copyright">
        <span>官方网址：http://www/yundaex.com</span>
        <span>客服热线：400-821-6789</span>
      {{--  <span class="special">收货人联</span>--}}
    </div>
</div>
</body>
</html>

@endif
<script>
   // window.print();
</script>